import React, {Component} from 'react';

import {connect} from 'dva';
import {Card, Badge, Modal, Form, Input, Icon, Button, Divider} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './CheckProfile.less';

const {Description} = DescriptionList;
const FormItem = Form.Item;
const {TextArea} = Input;
@connect(state => ({
    check: state.check,
}))
@Form.create()
export default class CheckProfile extends Component {
    state = {
        visible: false,
        location: {longitude: 120, latitude: 30},
        bigImage: '',
    }

    componentDidMount() {
        this.loadData();
    }


    unCheckSubmit = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const {dispatch, match} = this.props;
                console.log(values);
                dispatch({
                    type: 'check/back',
                    payload: {
                        id: match.params.id,
                        remark: values.remark,
                    },
                    callback: () => {
                        this.loadData();
                    },
                });
            }
        });
    }
    checkSubmit = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const {dispatch, match} = this.props;
                console.log(values);
                dispatch({
                    type: 'check/accredit',
                    payload: {
                        id: match.params.id,
                        remark: values.remark,
                    },
                    callback: () => {
                        this.loadData();
                    },
                });
            }
        });
    }

    loadData = () => {
        const {dispatch, match} = this.props;

        dispatch({
            type: 'check/fetchCheck',
            payload: {
                id: match.params.id,
            },
            callback: () => {
                const {check} = this.props;
                const {data} = check;
                const location = {longitude: Number(data.info.location[1]), latitude: Number(data.info.location[0])};
                this.setState({
                    location,
                });
            },
        });
    }

    render() {
        const {check} = this.props;
        const {loading, data} = check;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 14,
            },
        };
        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        const RemarkFormItem = () => {
            if (data.status !== 0) {
                return null;
            }
            return (
              <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                <Button type="primary" onClick={this.checkSubmit} loading={loading}>
                        通过审核
                </Button>
                <Button type="danger" onClick={this.unCheckSubmit} style={{marginLeft: 12}} htmlType="submit" loading={loading}>
                        驳回审核
                </Button>
              </FormItem>
            );
        };

        return (
          <PageHeaderLayout title="认证详情">
            <Card bordered={false}>
              <DescriptionList size="large" title="认证申请" style={{marginBottom: 32}}>
                <Description term="申请单号">{data.check_no}</Description>
                <Description term="状态"> <Badge status={data.status_class} />{data.status_label}</Description>
                <Description term="申请人">{data.info.true_name}</Description>
                <Description term="地址">{data.info.address} <Button
                  onClick={() => {
                                window.open(`http://api.map.baidu.com/marker?location=${this.state.location.latitude},${this.state.location.longitude}&title=地址位置&content=${data.info.address}&output=html`);
                            }}
                  style={{marginLeft: 10}}
                  type="primary"
                  icon="environment"
                >地图中查看
                                                           </Button>
                </Description>
                <Description term="工种">{data.service.name}</Description>
                <Description term="申请时间">{data.created_at}</Description>
                <Description term="服务时间">{data.info.work_time}</Description>
              </DescriptionList>
              <Divider style={{marginBottom: 32}} />
              <DescriptionList size="large" title="认证信息" style={{marginBottom: 32}}>
                <Description term="身份证正面"><img
                  onClick={() => {
                                this.setState({
                                    visible: true,
                                    bigImage: `https://zzbj.kooki.cn/${data.info.id_card_for}`,
                                });
                            }}
                  className={styles.photoItem}
                  alt="身份证正面"
                  src={`https://zzbj.kooki.cn/${data.info.id_card_for}`}
                />
                </Description>
                <Description term="身份证背面"><img
                  className={styles.photoItem}
                  alt="身份证背面"
                  onClick={() => {
                                this.setState({
                                    visible: true,
                                    bigImage: `https://zzbj.kooki.cn/${data.info.id_card_back}`,
                                });
                            }}
                  src={`https://zzbj.kooki.cn/${data.info.id_card_back}`}
                />
                </Description>
                <Description term="资质证明"><img
                  className={styles.photoItem}
                  alt="资质证明"
                  onClick={() => {
                                this.setState({
                                    visible: true,
                                    bigImage: `https://zzbj.kooki.cn/${data.info.prove}`,
                                });
                            }}
                  src={`https://zzbj.kooki.cn/${data.info.prove}`}
                />
                </Description>
                <Description term="手持身份证"><img
                  className={styles.photoItem}
                  alt="手持身份证"
                  onClick={() => {
                                this.setState({
                                    visible: true,
                                    bigImage: `https://zzbj.kooki.cn/${data.info.handle_card}`,
                                });
                            }}
                  src={`https://zzbj.kooki.cn/${data.info.handle_card}`}
                />
                </Description>
                <Description term="用户">{data.user.name}</Description>
                <Description term="联系电话">{data.user.phone}</Description>
              </DescriptionList>
              <Divider style={{marginBottom: 32}} />
              <Form>
                <FormItem {...formItemLayout} label="审核备注" hasFeedback>
                  {getFieldDecorator('remark', {
                            rules: [{
                                required: true, message: '审核备注',
                            }],
                        })(
                          <TextArea style={{ minHeight: 32 }} placeholder="请输入你的阶段性工作目标" rows={4} />
                        )}
                </FormItem>
                <RemarkFormItem />
              </Form>


            </Card>
            <Modal
              width={840}
              title="查看图片"
              visible={this.state.visible}
              onOk={() => {
                        this.setState({visible: false});
                    }}
              onCancel={() => {
                        this.setState({visible: false});
                    }}
            >
              <img alt="大图" style={{width: 800}} src={this.state.bigImage} />
            </Modal>
          </PageHeaderLayout>
        );
    }
}
